mdast-util-mdx

What is mdast-util-mdx?

The mdast-util-mdx npm package is a utility tool designed to work with MDX (Markdown for the component era) and MDAST (Markdown Abstract Syntax Tree). It provides functions to parse and serialize MDX documents, allowing developers to manipulate MDX content programmatically within the unified ecosystem.

What are mdast-util-mdx's main functionalities?

Parsing MDX

This feature allows the parsing of MDX text into an MDAST format, enabling further manipulation or inspection of the structure.

import { fromMarkdown } from 'mdast-util-mdx';
const mdxText = '# Hello, MDX!';
const mdast = fromMarkdown(mdxText, {extensions: [mdx()] });

Serializing MDX

This feature enables the serialization of an MDAST structure back into a string of MDX, useful for generating MDX files programmatically.

import { toMarkdown } from 'mdast-util-mdx';
const mdast = {type: 'root', children: [{type: 'heading', depth: 1, children: [{type: 'text', value: 'Hello, MDX!'}]}]};
const mdxText = toMarkdown(mdast, {extensions: [mdxToMarkdown()] });

Other packages similar to mdast-util-mdx

remark-mdx

This package is part of the unified ecosystem and is specifically tailored for parsing and compiling MDX files. It is similar to mdast-util-mdx but integrates more closely with the remark ecosystem, providing a more seamless experience when working with Markdown and MDX together.

README

mdast-util-mdx

mdast extensions to parse and serialize MDX: ESM, JSX, and expressions.

Contents

• What is this?
• When to use this
• Install
• Use
• API
  • mdxFromMarkdown()
  • mdxToMarkdown(options?)
  • ToMarkdownOptions
• HTML
• Syntax
• Syntax tree
• Types
• Compatibility
• Related
• Contribute
• License

What is this?

This package contains two extensions that add support for MDX syntax in markdown to mdast: ESM (import x from 'y'), JSX (<a />), and expressions ({Math.PI}). These extensions plug into mdast-util-from-markdown (to support parsing MDX in markdown into a syntax tree) and mdast-util-to-markdown (to support serializing MDX in syntax trees to markdown).

When to use this

You can use these extensions when you are working with mdast-util-from-markdown and mdast-util-to-markdown already.

When working with mdast-util-from-markdown, you must combine this package with micromark-extension-mdx or micromark-extension-mdxjs.

Instead of this package, you can also use the extensions separately:

• mdast-util-mdx-expression — support MDX expressions
• mdast-util-mdx-jsx — support MDX JSX
• mdast-util-mdxjs-esm — support MDX ESM

All these packages are used in remark-mdx, which focusses on making it easier to transform content by abstracting these internals away.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install mdast-util-mdx

In Deno with esm.sh:

import {mdxFromMarkdown, mdxToMarkdown} from 'https://esm.sh/mdast-util-mdx@3'

In browsers with esm.sh:

<script type="module">
  import {mdxFromMarkdown, mdxToMarkdown} from 'https://esm.sh/mdast-util-mdx@3?bundle'
</script>

Use

Say our document example.mdx contains:

import Box from "place"

Here’s an expression:

{
  1 + 1 /* } */
}

Which you can also put inline: {1+1}.

<Box>
  <SmallerBox>
    - Lists, which can be indented.
  </SmallerBox>
</Box>

…and our module example.js looks as follows:

import fs from 'node:fs/promises'
import {mdxjs} from 'micromark-extension-mdxjs'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {mdxFromMarkdown, mdxToMarkdown} from 'mdast-util-mdx'
import {toMarkdown} from 'mdast-util-to-markdown'

const doc = await fs.readFile('example.mdx')

const tree = fromMarkdown(doc, {
  extensions: [mdxjs()],
  mdastExtensions: [mdxFromMarkdown()]
})

console.log(tree)

const out = toMarkdown(tree, {extensions: [mdxToMarkdown()]})

console.log(out)

…now running node example.js yields (positional info removed for brevity):

{
  type: 'root',
  children: [
    {
      type: 'mdxjsEsm',
      value: 'import Box from "place"',
      data: {
        estree: {
          type: 'Program',
          body: [
            {
              type: 'ImportDeclaration',
              specifiers: [
                {
                  type: 'ImportDefaultSpecifier',
                  local: {type: 'Identifier', name: 'Box'}
                }
              ],
              source: {type: 'Literal', value: 'place', raw: '"place"'}
            }
          ],
          sourceType: 'module'
        }
      }
    },
    {
      type: 'paragraph',
      children: [{type: 'text', value: 'Here’s an expression:'}]
    },
    {
      type: 'mdxFlowExpression',
      value: '\n1 + 1 /* } */\n',
      data: {
        estree: {
          type: 'Program',
          body: [
            {
              type: 'ExpressionStatement',
              expression: {
                type: 'BinaryExpression',
                left: {type: 'Literal', value: 1, raw: '1'},
                operator: '+',
                right: {type: 'Literal', value: 1, raw: '1'}
              }
            }
          ],
          sourceType: 'module'
        }
      }
    },
    {
      type: 'paragraph',
      children: [
        {type: 'text', value: 'Which you can also put inline: '},
        {
          type: 'mdxTextExpression',
          value: '1+1',
          data: {
            estree: {
              type: 'Program',
              body: [
                {
                  type: 'ExpressionStatement',
                  expression: {
                    type: 'BinaryExpression',
                    left: {type: 'Literal', value: 1, raw: '1'},
                    operator: '+',
                    right: {type: 'Literal', value: 1, raw: '1'}
                  }
                }
              ],
              sourceType: 'module'
            }
          }
        },
        {type: 'text', value: '.'}
      ]
    },
    {
      type: 'mdxJsxFlowElement',
      name: 'Box',
      attributes: [],
      children: [
        {
          type: 'mdxJsxFlowElement',
          name: 'SmallerBox',
          attributes: [],
          children: [
            {
              type: 'list',
              ordered: false,
              start: null,
              spread: false,
              children: [
                {
                  type: 'listItem',
                  spread: false,
                  checked: null,
                  children: [
                    {
                      type: 'paragraph',
                      children: [
                        {type: 'text', value: 'Lists, which can be indented.'}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

import Box from "place"

Here’s an expression:

{
  1 + 1 /* } */
}

Which you can also put inline: {1+1}.

<Box>
  <SmallerBox>
    *   Lists, which can be indented.
  </SmallerBox>
</Box>

API

This package exports the identifiers mdxFromMarkdown and mdxToMarkdown. There is no default export.

mdxFromMarkdown()

Create an extension for mdast-util-from-markdown to enable MDX (ESM, JSX, expressions).

Returns

Extension for mdast-util-from-markdown to enable MDX (FromMarkdownExtension).

When using the syntax extensions with addResult, ESM and expression nodes will have data.estree fields set to ESTree Program node.

mdxToMarkdown(options?)

Create an extension for mdast-util-to-markdown to enable MDX (ESM, JSX, expressions).

Extension for mdast-util-to-markdown.

Parameters

• options (ToMarkdownOptions) — configuration

Returns

Extension for mdast-util-to-markdown to enable MDX (FromMarkdownExtension).

ToMarkdownOptions

Configuration (TypeScript type).

Fields

• quote ('"' or "'", default: '"') — preferred quote to use around attribute values
• quoteSmart (boolean, default: false) — use the other quote if that results in less bytes
• tightSelfClosing (boolean, default: false) — do not use an extra space when closing self-closing elements: <img/> instead of <img />
• printWidth (number, default: Infinity) — try and wrap syntax at this width. When set to a finite number (say, 80), the formatter will print attributes on separate lines when a tag doesn’t fit on one line. The normal behavior is to print attributes with spaces between them instead of line endings

HTML

MDX has no representation in HTML. Though, when you are dealing with MDX, you will likely go through hast. You can enable passing MDX through to hast by configuring mdast-util-to-hast with passThrough: ['mdxjsEsm', 'mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression'].

Syntax

See Syntax in micromark-extension-mdxjs.

Syntax tree

This utility combines several mdast utilities. See their readmes for the node types supported in the tree:

• mdast-util-mdx-expression — support MDX expressions
• mdast-util-mdx-jsx — support MDX JSX
• mdast-util-mdxjs-esm — support MDX ESM

Types

This package is fully typed with TypeScript. It exports the additional types MdxFlowExpression and MdxTextExpression from mdast-util-mdx-expression; MdxJsxAttribute, MdxJsxAttributeValueExpression, MdxJsxExpressionAttribute, MdxJsxFlowElement, MdxJsxTextElement, and ToMarkdownOptions from mdast-util-mdx-jsx; and MdxjsEsm from mdast-util-mdxjs-esm.

It also registers the node types with @types/mdast and @types/hast. If you’re working with the syntax tree, make sure to import this utility somewhere in your types, as that registers the new node types in the tree.

/**
 * @typedef {import('mdast-util-mdx')}
 */

import {visit} from 'unist-util-visit'

/** @type {import('mdast').Root} */
const tree = getMdastNodeSomeHow()

visit(tree, function (node) {
  // `node` can now be an expression, JSX, or ESM node.
})

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, mdast-util-mdx@^3, compatible with Node.js 16.

This utility works with mdast-util-from-markdown version 2+ and mdast-util-to-markdown version 2+.

Related

• remark-mdx — remark plugin to support MDX
• micromark-extension-mdx — micromark extension to parse MDX
• micromark-extension-mdxjs — micromark extension to parse JavaScript-aware MDX

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer